<template>
  <div class="my-tab-bar">
    <!-- 第一步：接收父组件传递的数据渲染底部导航栏 -->
    <!-- 点击底部导航栏添加类名--利用索引和一个变量:如果一一对应导航栏对应 -->
    <div
      class="tab-item"
      @click="changeTab(0,'/mygoodslist')"
      :class="{ current: tabIndex === 0 }"
    >
      <span class="iconfont" :class="arr[0].iconText"></span>
      <span> {{ arr[0].text }}</span>
    </div>
    <div
      class="tab-item"
      @click="changeTab(1,'/mygoodssearch')"
      :class="{ current: tabIndex === 1 }"
    >
      <span class="iconfont" :class="arr[1].iconText"></span>
      <span> {{ arr[1].text }}</span>
    </div>
    <div
      class="tab-item"
      @click="changeTab(2,'/myuserinfo')"
      :class="{ current: tabIndex === 2 }"
    >
      <span class="iconfont" :class="arr[2].iconText"></span>
      <span> {{ arr[2].text }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    arr: {
      type: Array,
      required: true,
      //1.2校验数据的长度如果长度在2-5之间返回true，否则返回false
      validator(val) {
        if (val.length < 2 || val.length > 5) {
          console.error('数据长度必须在2-5之间')
          return false
        }
        return true
      },
    },
  },
  data() {
    return {
      tabIndex: 0,
    }
  },
  methods: {
    changeTab(index,targetPath) {
      this.tabIndex = index
      //子组件触发父组件的自定义事件并且把点击的对应组件名称传递给父组件
      //父组件接收对应的名称设置动态组件的切换
      this.$router.push({
        path:targetPath
      })
    },
  },
}
</script>

<style lang="less" scoped>
.my-tab-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white;
  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.current {
  color: #1d7bff;
}
</style>
